<template>
  <div class="drawerBox">
    <!-- 阶段列表 -->
    <div class="title" @click="phaseCollapse = !phaseCollapse">
      {{$t('basic.stage_list')}}
      <i class="el-icon-caret-bottom zhedie" v-show="phaseCollapse"></i>
      <i class="el-icon-caret-top zhedie" v-show="!phaseCollapse"></i>
    </div>
    <table1 ref="table1" :phaseCollapse="phaseCollapse" :screenWidth="screenWidth" :radioId="radioId" :equipmentClassId="equipmentClassId">
    </table1>

    <!-- 单元参数 -->
    <div class="title" @click="unitCollapse = !unitCollapse">
      {{$t('basic.unit_attr')}}
      <i class="el-icon-caret-bottom zhedie" v-show="unitCollapse"></i>
      <i class="el-icon-caret-top zhedie" v-show="!unitCollapse"></i>
    </div>
    <table2 ref="table2" v-show="unitCollapse" :screenWidth="screenWidth" :radioId="radioId" :equipmentClassId="equipmentClassId"></table2>

  </div>
</template>

<script>
import table1 from "./table1.vue"
import table2 from "./table2.vue"

export default {
  components: {
    table1,
    table2,
  },
  props: {
    drawer: Boolean,
    screenWidth: Number,
    radioId: String,
    equipmentClassId: String
  },
  data () {
    return {
      activeName: "first",
      phaseCollapse: false,
      unitCollapse: false,

    }
  },
  watch: {
    radioId (val) {
      this.$nextTick(() => {
        this.$refs.table1.getUnitPhaseDefineList()
        this.$refs.table2.getUnitTagsDefineList()
      })

      // console.log(this.count,'11222')
    }
  },
  created () {

  },
  methods: {
    handleClose () {
      this.$emit('handleClose')
    },
  }
}
</script>

<style scoped>
.demo-drawer__content {
  padding: 15px;
}
.drawerBox >>> .el-drawer {
  width: 80% !important;
}
.drawerBox >>> .el-drawer__header {
  margin-bottom: 10px;
}
.demo-drawer__footer {
  text-align: center;
}
.title {
  line-height: 35px;
  background: #3b2e58;
  color: #fff;
  padding: 0 15px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.zhedie {
  float: right;
  line-height: 35px;
  font-size: 18px;
  cursor: pointer;
}
</style>